<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Milano | Interactive Responsive HTML5 Template</title>
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Add your CSS files here -->
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/nivo/default.css">
	<link rel="stylesheet" href="css/themes/green.css">

	<!-- Add your Fonts here -->
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

<a href="http://themeforest.net/item/milano-interactive-responsive-html5-template/5110008" title="Get this Theme" class="badge">Get this Theme</a>

<div class="settings">
	<a href="#" class="icon-cog"></a>
	<span class="themes">
		<a href="#" class="theme" data-color="red">Theme Red</a>
		<a href="#" class="theme" data-color="green">Theme Green</a>
		<a href="#" class="theme" data-color="blue">Theme Blue</a>
		<a href="#" class="theme" data-color="white">Theme White</a>
		<a href="#" class="theme" data-color="rose">Rose Color</a>
		<a href="#" class="theme" data-color="aqua">Aqua Color</a>
		<a href="#" class="theme" data-color="orange">Orange Color</a>
	</span>
</div>

<div class="container">

	<div class="logo"><img src="img/logo.svg" alt="Logo"></div>

	<div class="social">
		<a href="http://facebook.com/rocketthemes" class="icon-facebook" title="Facebook"></a>
		<a href="http://twitter.com/rocketthemes" class="icon-twitter" title="Twitter"></a>
		<a href="#" class="icon-googleplus" title="Googleplus"></a>
		<a href="#" class="icon-dribbble" title="Dribbble"></a>
		<a href="#" class="icon-behance" title="Behance"></a>
		<a href="#" class="icon-instagram" title="Instagram"></a>
		<a href="#" class="icon-flickr" title="Flickr"></a>
	</div>
	<!-- Social Icons End -->

	<header>
		<nav id="nav">
			<ul class="nav">
				<li><img src="img/logo.svg" alt="My Logo"></li>
				<li><a href="index.html" class="icon-user"><span>Profile</span></a></li>
				<li class="active"><a href="work.html" class="icon-briefcase"><span>Work</span></a></li>
				<li><a href="resume.html" class="icon-list"><span>Resume</span></a></li>
				<li><a href="contact.html" class="icon-mail"><span>Contact</span></a></li>
			</ul>
		</nav>
	</header>
	<!-- Header End -->

	<section class="content">

		<article class="work">
			
			<h2>My projects</h2>
			<ul class="projects">
				<li>
					<figure>
						<a href="project-1.html">
							<img src="img/work/photography/1.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Summer Shooting</h4>
							<p>This is a project with an Image Slider. A perfect Showcase for Designers and Photographers.</p>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<a href="project-2.html">
							<img src="img/work/design/1.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Facebook Redesign</h4>
							<p>This is a project with an Image Slider. A perfect Showcase for Designers and Photographers.</p>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<a href="project-3.html">
							<img src="img/work/design/3.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Nike Website</h4>
							<p>This is a project with a Lightbox Gallery. Support for Images, Videos and Custom Content. Perfect for every Project!</p>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<a href="project-1.html">
							<img src="img/work/design/4.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Google+ App</h4>
							<p>This is a project with an Image Slider. A perfect Showcase for Designers and Photographers.</p>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<a href="project-2.html">
							<img src="img/work/design/2.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Personal Website Design</h4>
							<p>This is a project with an Image Slider. A perfect Showcase for Designers and Photographers.</p>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<a href="project-3.html">
							<img src="img/work/photography/3.jpg" alt="My Image">
							<div>
								<span class="icon-folder"></span>
							</div>
						</a>
						<figcaption>
							<h4>Various Photography</h4>
							<p>This is a project with a Lightbox Gallery. Support for Images, Videos and Custom Content. Perfect for every Project!</p>
						</figcaption>
					</figure>
				</li>
			</ul>
			<!-- Projects End -->

			<h2>My work</h2>

            <ul class="gridfilter">
                <li class="filter" data-filter="all">Show All</li>
                <li class="filter" data-filter="webdesign">Webdesign</li>
                <li class="filter" data-filter="photography">Photography</li>
                <li class="filter" data-filter="branding">Logo Branding</li>
                <li class="filter" data-filter="uiux">UI / UX</li>
            </ul>

			<ul class="work-grid">

 				<li class="mix webdesign">
					<figure>
	 					<a class="swipebox" href="img/work/photography/1.jpg" title="This is my description">
	 						<img src="img/work/photography/1.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix webdesign">
					<figure>
	 					<a class="swipebox" href="img/work/photography/2.jpg" title="This is my description">
	 						<img src="img/work/photography/2.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix webdesign">
					<figure>
	 					<a class="swipebox" href="img/work/photography/3.jpg" title="This is my description">
	 						<img src="img/work/photography/3.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix uiux">
					<figure>
	 					<a class="swipebox" href="img/work/photography/4.jpg" title="This is my description">
	 						<img src="img/work/photography/4.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix webdesign">
					<figure>
	 					<a class="swipebox" href="img/work/photography/5.jpg" title="This is my description">
	 						<img src="img/work/photography/5.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix branding">
					<figure>
	 					<a class="swipebox" href="img/work/photography/6.jpg" title="This is my description">
	 						<img src="img/work/photography/6.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
  				<li class="mix photography">
					<figure>
	 					<a class="swipebox" href="img/work/photography/7.jpg" title="This is my description">
	 						<img src="img/work/photography/7.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix branding">
					<figure>
	 					<a class="swipebox" href="img/work/photography/8.jpg" title="This is my description">
	 						<img src="img/work/photography/8.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix photography">
					<figure>
	 					<a class="swipebox" href="img/work/photography/9.jpg" title="This is my description">
	 						<img src="img/work/photography/9.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix photography">
					<figure>
	 					<a class="swipebox" href="img/work/photography/10.jpg" title="This is my description">
	 						<img src="img/work/photography/10.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix uiux">
					<figure>
	 					<a class="swipebox" href="img/work/photography/11.jpg" title="This is my description">
	 						<img src="img/work/photography/11.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
 				<li class="mix photography">
					<figure>
	 					<a class="swipebox" href="img/work/photography/12.jpg" title="This is my description">
	 						<img src="img/work/photography/12.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
  				<li class="mix uiux">
					<figure>
	 					<a class="swipebox" href="img/work/photography/13.jpg" title="This is my description">
	 						<img src="img/work/photography/13.jpg" alt="Image">
							<div>
								<span class="icon-search"></span>
							</div>
						</a>

 					</figure>
 				</li>
			</ul>
			<!-- Work Grid End -->

		</article>

	</section>
	<!-- Content End -->

</div>
<!-- Container End -->

<!-- Add your scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.mixitup.js"></script>
<script src="js/jquery.swipebox.js"></script>

<script>
      var navigation = responsiveNav("#nav", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 400,      // Integer: Speed of the transition, in milliseconds
        label: "",            // String: Label for the navigation toggle
        insert: "before",     // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
</script>

<script>
    $(function(){
        $('.work-grid').mixitup();
    });

	$(function($) {
		$(".swipebox").swipebox();
	});
</script>

</body>
</html>